<!-- 定制开发请联系客服微信：csmszf -->
<template>
	<view class="goshop-page">
		<view class='goshop-wraper'>
			<image class="goshop-head-img" src="/static/imgs/home/top-bg.png"></image>
			<view class='goshop-header'>
				<view class="goshop-mine-top">
					<view style="width: 124rpx;height: 124rpx;position: relative;">
						<image class="goshop-img-radius-62" :src="memberInfo.avatar?memberInfo.avatar:defAvatar"></image>
						<goshop-sex :sex="memberInfo.sex" v-if="isLogin"></goshop-sex>
					</view>
					<view class="goshop-mine-level">
						<view v-if="isLogin" class="lg-font-size goshop-mine-name" @tap="$Router.push({ path: '/pages/common/settings/material'})">
							{{memberInfo.nickname?memberInfo.nickname:memberInfo.username}}
						</view>
						<view v-else class="lg-font-size goshop-mine-name" @tap="$Router.push({ path: '/pages/common/public/login_one'})">
							{{signinText}}
						</view>
						<view class="goshop-mine-level-item" v-if="isLogin">
							<view>
								<view class="sm-font-size" style="text-align: center;background-color: #3c9cff;color: #fff;width:60rpx;border-radius: 50rpx;">LV{{memberInfo.level}}</view>
							</view>
							<view class="u-m-l-10">
								   <goshop-level :data="memberInfo.levelInfo"></goshop-level>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;">
						<view @tap="$Router.push('/pages/common/settings/settings')" style="display: flex;justify-content: flex-end;">
							<view class="iconfont iconfont-setup" style="width: 64rpx;height: 64rpx;"></view>
						</view>
						<view class="sm-font-size goshop-center" v-if="isLogin" @tap="$Router.push({ path: '/pages/common/center/center', query: { id: memberInfo.id}})">{{personalcenterText}}</view>
					</view>
				</view>
				<view class="goshop-mine-center">
					<view class="goshop-mine-center-list">
						<view class="goshop-mine-center-item">
							<text>{{memberInfo.integral?memberInfo.integral:0}}</text>
							<text>{{integralText}}</text>
						</view>
						<view class="goshop-mine-center-item" @tap="$Router.push('/pages/common/mine/footprint')">
							<text>{{memberInfo.traceNums?memberInfo.traceNums:0}}</text>
							<text>{{footprintText}}</text>
						</view>
						<view class="goshop-mine-center-item" @tap="$Router.push('/pages/common/order/published')">
							<text>{{memberInfo.goodNums?memberInfo.goodNums:0}}</text>
							<text>{{babyText}}</text>
						</view>
						<view class="goshop-mine-center-item" @tap="$Router.push('/pages/common/post/post')">
							<text>{{memberInfo.postNums?memberInfo.postNums:0}}</text>
							<text>{{postText}}</text>
						</view>
					</view>
				</view>
				<view class="goshop-action-wrap">
					<view class="goshop-action-list">
						<view class="goshop-action-item" @tap="$Router.push('/pages/common/order/published')">
							<view class="iconfont iconfont-published icon-img-size"></view>
							<view class="goshop-action-item-text">{{postedText}}</view>
						</view>
						<view class="goshop-action-item" v-if="memberInfo.authStatus === 1" @tap="$Router.push('/pages/common/order/sold')">
							<view class="iconfont iconfont-cart icon-img-size"></view>
							<text class="goshop-action-item-text">{{soldText}}</text>
						</view>
						<view class="goshop-action-item" @tap="$Router.push('/pages/common/order/bought')">
							<view class="iconfont iconfont-bought icon-img-size"></view>
							<view class="goshop-action-item-text">{{boughtText}}</view>
						</view>
						<view class="goshop-action-item" @tap="$Router.push('/pages/common/wallet/wallet')">
							<view class="iconfont iconfont-wallet icon-img-size"></view>
							<view class="goshop-action-item-text">{{walletText}}</view>
						</view>
					</view>
				</view>
				<view class="goshop-mine-main">
					<view class="goshop-mine-main-list">
						<view class="goshop-mine-main-item goshop-mine-main-item-bottom" @tap="$Router.push('/pages/common/mine/attention')">
							<view class="iconfont iconfont-attention icon-size"></view>
							<view class="goshop-mine-main-item-text">{{attentionText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
						<view class="goshop-mine-main-item goshop-mine-main-item-bottom" @tap="$Router.push('/pages/common/help/help')">
							<view class="iconfont iconfont-help icon-size"></view>
							<view class="goshop-mine-main-item-text">{{helpcenterText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
						<view class="goshop-mine-main-item goshop-mine-main-item-bottom" @tap="$Router.push('/pages/common/settings/material')">
							<view class="iconfont iconfont-material icon-size"></view>
							<view class="goshop-mine-main-item-text">{{materialText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
						<view class="goshop-mine-main-item goshop-mine-main-item-bottom" @tap="$Router.push('/pages/common/feedback/feedback')">
							<view class="iconfont iconfont-feedback icon-size"></view>
							<view class="goshop-mine-main-item-text">{{feedbackText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
						<view class="goshop-mine-main-item goshop-mine-main-item-bottom" @tap="$Router.push('/pages/common/address/address')">
							<view class="iconfont iconfont-shipping_address icon-size"></view>
							<view class="goshop-mine-main-item-text">{{shippingaddressText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
						<view class="goshop-mine-main-item goshop-mine-main-item-bottom">
							<view class="iconfont iconfont-updates icon-size"></view>
							<view class="goshop-mine-main-item-text">{{checkforupdatesText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
						<view class="goshop-mine-main-item" @tap="logout()">
							<view class="iconfont iconfont-quit icon-size"></view>
							<view class="goshop-mine-main-item-text">{{signoutText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
<!-- 						<view class="goshop-mine-main-item" @tap="$Router.push('/pages/common/gold/recharge')">
							<view class="iconfont iconfont-quit icon-size"></view>
							<view class="goshop-mine-main-item-text">内购测试</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
	import config from '@/common/config.js'
	import jwt from '@/utils/jwt.js'
	export default {
		data() {
			return {
				defAvatar: '',
				isLogin: false,
				signinText:'',
				attentionText:'',
				helpcenterText:'',
				materialText:'',
				feedbackText:'',
				shippingaddressText:'',
				checkforupdatesText:'',
				signoutText:'',
				postedText:'',
				boughtText:'',
				walletText:'',
				soldText:'',
				integralText:'',
				footprintText:'',
				babyText:'',
				postText:'',
				personalcenterText:'',
				maleText:'',
				femaleText:'',
				sexText:'',
			};
		},
	    computed: {
			...mapGetters(['memberInfo'])
	    },
		async onLoad(){
		  await this.$onLaunched;
		  this.initData();
		},
		async onShow(){
		  this.refresh();
		  this.isLogin ? await this.getMemberInfo() : this.resetMemberInfo();
		},
		methods:{
			...mapActions(['getMemberInfo','resetMemberInfo','LogOut']),
			initData(){
				this.defAvatar = this.$store.state.$appInfo.defaultAvatar;
				//console.info(this.$store.state.member.memberInfo.authStatus);
			},
			refresh(){
				this.isLogin = jwt.getLogin();
				this.attentionText = this.$t('mine.attention.text');
				this.helpcenterText = this.$t('mine.helpcenter.text');
				this.materialText = this.$t('mine.material.text');
				this.feedbackText = this.$t('mine.feedback.text');
				this.shippingaddressText = this.$t('mine.shippingaddress.text');
				this.checkforupdatesText = this.$t('mine.checkforupdates.text');
				this.signoutText = this.$t('common.signout.text');
				this.signinText = this.$t('common.signin.text');
				this.maleText = this.$t('common.male.text');
				this.femaleText = this.$t('common.female.text');
				this.postedText = this.$t('mine.posted.text');
				this.boughtText = this.$t('mine.bought.text');
				this.walletText = this.$t('mine.wallet.text');
				this.soldText = this.$t('mine.sold.text');
				this.integralText = this.$t('mine.integral.text');
				this.footprintText = this.$t('mine.footprint.text');
				this.babyText = this.$t('mine.baby.text');
				this.postText = this.$t('mine.post.text');
				this.personalcenterText = this.$t('mine.personalcenter.text');
			},
			logout(){
				this.LogOut().then(res => {
					uni.removeStorageSync('vuex_user');
					uni.removeStorageSync('vuex_token');
					jwt.logout();
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/home/home'
						});
					}, 500);
				  })
			},
			applePay(){
				
			}
		}
	}
</script>

<style lang="scss">
	 .icon {
	       width: 1em; height: 1em;
	       vertical-align: -0.15em;
	       fill: currentColor;
	       overflow: hidden;
	    }
.goshop-header{
	padding: 20rpx 20rpx;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100vh;
}
.goshop-head-img{
	//position: fixed;
	width: 100%;
	height: 320rpx; 
	top: 0;
	left: 0;
}
.goshop-center{
	width: 150rpx;
	opacity:0.5;
	background-color: $goshop-color-auxiliary-one;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	padding: 10rpx 0;
	margin-top: 10rpx;
	//color: $goshop-color-auxiliary-one;
}
.goshop-mine-top{
	display: flex;
	justify-content: space-between;
}
.goshop-mine-level{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 10rpx;
	flex: 3;
	//height: 100%;
	.goshop-mine-level-item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.goshop-mine-name{
		flex: 3;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
}
.goshop-mine-center{
	//height: 60rpx;
	display: flex;
	//margin-top: 30rpx;
	justify-content: center;
	align-items: center;
	padding: 5px 0px;
	.goshop-mine-center-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.goshop-mine-center-item{
			width: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: $goshop-color-auxiliary-one;
		}
	}
}

.goshop-action-wrap{
	//margin-top: 30rpx;
	padding: 20rpx 20rpx;
	background-color: $goshop-color-auxiliary-one;
	border-radius: 30rpx;
}
.goshop-action-list{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 0;
	.goshop-action-item{
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.goshop-action-item-text{
			margin-top: 10rpx;
		}
	}
}
.goshop-mine-main-item-bottom{
	border-bottom: 2rpx solid $goshop-text-color-three;
}
.goshop-mine-main{
	margin-top:20rpx;
	background-color: $goshop-color-auxiliary-one;
	padding:0  20rpx;
	border-radius: 30rpx;
	.goshop-mine-main-list{
		.goshop-mine-main-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			
			.goshop-mine-main-item-text{
				flex: 3;
				padding: 0 10rpx;
			}
		}
	}
}
</style>
